{{#if this.config.customCssUrl}}
    <link integrity="" rel="stylesheet" href="{{this.config.customCssUrl}}">
{{/if}}

<BsNavbar
    @type="default"
    @backgroundColor="light"
    @collapsed={{true}}
    @onCollapse={{action (mut collapsed) true}}
    @onExpand={{action (mut collapsed) false}} as |navbar|
>
    <div class="navbar-header">
        {{navbar.toggle}}
    </div>
    <navbar.content>
        <navbar.nav as |nav|>
            {{#each this.model.navEntries as |navEntry|}}
                {{#if navEntry.entries.length}}
                    <nav.dropdown as |dd|>
                        <dd.toggle>
                            {{navEntry.label}}
                            <span class="caret"></span>
                        </dd.toggle>
                        <dd.menu as |ddm|>
                            {{#each navEntry.entries as |entry|}}
                                <ddm.item>
                                    {{! We need the href in addition to the click handler to support
                                        opening the page in a new window }}
                                    <a href="{{url-for "openxpki" entry.key}}" {{on "click" (fn this.navigateTo entry.key)}}>
                                        {{entry.label}}
                                    </a>
                                </ddm.item>
                            {{/each}}
                        </dd.menu>
                    </nav.dropdown>
                {{else}}
                    <nav.item>
                        <a href="{{url-for "openxpki" navEntry.key}}" {{on "click" (fn this.navigateTo navEntry.key)}}>
                            {{navEntry.label}}
                        </a>
                    </nav.item>
                {{/if}}
            {{/each}}
        </navbar.nav>
        <navbar.nav class="navbar-right" as |nav|>
            {{#if this.model.user}}
                <nav.item>
                    <nav.linkTo @route="openxpki" @model="logout">
                        {{t 'site.logout'}}
                    </nav.linkTo>
                </nav.item>
            {{/if}}
        </navbar.nav>
    </navbar.content>
</BsNavbar>

<div class="container-fluid  {{this.model.tabs.firstObject.page.className}}">
    <div class="oxi-message">
        {{#if this.model.status.href}}
            <a href="{{this.model.status.href}}" target="_blank">
                <div class="alert {{this.statusClass}}" style="cursor:pointer;">
                    <OxiBase::Formatted @format="nl2br" @value={{this.model.status.message}}/>
                </div>
            </a>
        {{else}}
            <div class="alert {{this.statusClass}}">
                <OxiBase::Formatted @format="nl2br" @value={{this.model.status.message}}/>
            </div>
        {{/if}}
    </div>

    <div class="oxi-pagehead">
        {{#if this.model.tabs.firstObject.page.breadcrumb.length}}
            <ol class="breadcrumb">
                {{#each this.model.tabs.firstObject.page.breadcrumb as |entry|}}
                    {{#if entry.label}}<li class="{{entry.className}}">{{entry.label}}</li>{{/if}}
                {{/each}}
            </ol>
        {{/if}}
        <h2>{{this.model.tabs.firstObject.page.label}}</h2>
    </div>

    {{#if this.model.tabs.firstObject.page.description}}
        <div class="description">
            {{{this.model.tabs.firstObject.page.description}}}
        </div>
    {{/if}}
    {{#if this.showTabs}}
        <ul class="nav nav-tabs">
            {{#each this.model.tabs as |entry|}}
                <li class="{{if entry.active "active"}}">
                    <a {{action "activateTab" entry}}>
                        {{if entry.page.shortlabel entry.page.shortlabel entry.page.label}}
                        <span class="tab-close" {{action "closeTab" entry}}>
                            {{!-- template-lint-disable no-bare-strings --}}
                            &times;
                        </span>
                    </a>
                </li>
            {{/each}}
        </ul>
    {{/if}}
    <div class="tab-content">
        {{#each this.model.tabs as |entry|}}
            <div class="tab-pane {{if entry.active "active"}}">
                <div class="Xcontainer sections">
                    <div class="row">
                        <div class="{{if entry.right "col-md-8" "col-md-12"}}">
                            {{#each entry.main as |mainEntry|}}
                                <OxiSection @content={{mainEntry}}/>
                            {{/each}}
                        </div>
                        <div class="{{if entry.right "col-md-4" "hide"}}">
                            {{#each entry.right as |rightEntry|}}
                                <div class="well">
                                    <OxiSection @content={{rightEntry}}/>
                                </div>
                            {{/each}}
                        </div>
                    </div>
                </div>
            </div>
        {{/each}}
    </div>
</div>

{{#let this.model.popup as |popup|}}
    <BsModal
        @open={{popup}}
        @closeButton={{true}}
        @fade={{true}}
        @backdrop={{true}}
        @backdropClose={{false}}
        @onHidden={{action "clearPopupData"}}
        @size={{if popup.page.isLarge "lg"}}
        as |Modal|
    >
        <Modal.header>
            <h4 class="modal-title">
                {{if popup.page.shortlabel popup.page.shortlabel popup.page.label}}
            </h4>
        </Modal.header>
        <Modal.body>
            {{#each popup.main as |mainEntry|}}
                <OxiSection @content={{mainEntry}}/>
            {{/each}}
        </Modal.body>
        <Modal.footer>
            <BsButton @onClick={{action Modal.close}}>{{t 'site.close_popup'}}</BsButton>
        </Modal.footer>
    </BsModal>
{{/let}}

<BsModal
    @open={{this.model.error}}
    @closeButton={{true}}
    @fade={{true}}
    @backdrop={{true}}
    @backdropClose={{false}}
    as |Modal|
>
    <Modal.header>
        <h4 class="modal-title">{{t 'error_popup.header'}}</h4>
    </Modal.header>
    <Modal.body>
        {{{this.model.error.message}}}
    </Modal.body>
    <Modal.footer>
        <BsButton @onClick={{action "reload"}} @type="primary">{{t 'error_popup.reload'}}</BsButton>
        <BsButton @onClick={{action Modal.close}}>{{t 'site.close_popup'}}</BsButton>
    </Modal.footer>
</BsModal>

{{#if this.model.refresh}}
<div class="progress refresh">
    <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar">
        {{t 'site.autorefresh'}}
    </div>
</div>
{{/if}}

{{#if this.model.showLoadingBanner}}
<div class="dimmer"></div>
<div class="progress loading">
    <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar">
        {{t 'site.loading'}}
    </div>
</div>
{{/if}}
